<template lang="pug">
.option-btn(@click="openPopup") {{extra.title}}
uni-popup(ref="popup" type="center") 
  .popup
    .flex.font-medium.mb-2.text-base.justify-between
      .flex-1 {{extra.title}}
      uni-icons(type="closeempty"  color="dedede" size="24" @click.stop="closePopup()")
    .grid.grid-cols-2.gap-4.form.mb-8
      .item-col-2.flex(v-for="item in extra.fields" :key="item.name")
        view.label.text-prim.w-6 {{item.label}}
        uni-easyinput(primaryColor="#B59E6D" :clearable="false" type="digit" v-model="form[item.name]")

    .flex.justify-end
      button.option-btn(@click="GetOtherSize(`xl`)") 确定
</template>
<script setup>
import { GetSize } from "@/api/common.js";

const props = defineProps({
  extra:Object
})
const form = reactive({ })
const emit = defineEmits(['change'])

onMounted(()=>{
  console.log(props.extra)
  let data = {};
  for(let item of props.extra?.fields){
    data[item.name] = 0;
  };
  Object.assign(form, data)
})

 async function GetOtherSize(type){
   uni.showLoading();
  const page = getCurrentPages();
  let crrt = page[page.length-1];
  const data = {
    type: crrt.options.name,
    productCode:crrt.options.productCode,
    productTypeCode:crrt.options.productTypeCode,
    size: {
    type: type,
    ...form
    }
  }
  const res = await GetSize(data);
  Object.assign(form,res.data)
  closePopup();
  emit('change',form)
  uni.hideLoading();
}
// ==== pop start ==== 
const popup = ref(null)
async function openPopup () {
  popup.value.open();
}
function closePopup () {
  popup.value.close();
}
</script>
<style scoped lang="scss">

</style>